<template lang="html">
<div class="section-page renovationhome-page" v-loading="loading">
    <choose-files ref="chooseFiles" :config="chooseFilesConfig" :changeEvt="uploadFileChange"></choose-files>
    <choose-goods ref="chooseGoods" :config="chooseGoodsConfig" :changeEvt="uploadFileChange"></choose-goods>
    <choose-categories ref="chooseCategories" :config="chooseCategoriesConfig" :changeEvt="uploadFileChange"></choose-categories>
    <choose-link ref="chooseLink" :config="chooseLinkConfig" :changeEvt="uploadFileChange"></choose-link>
    <div class="page-content">
        <div class="page-body pad-no">
            <section class="page-box">
                <div class="welcome-container">
                    <div class="renovation-content">
                        <el-row class="tac renohome-left" v-show="!loading">
                            <el-col>
                                <!-- <el-button type="text" @click="$refs.image.toggle()">toggle images</el-button> -->
                                <!-- <el-button type="text" @click="$refs.chooseGoods.toggle()">toggle goods</el-button> -->
                                <el-menu default-active="1" :default-openeds="openeds" class="el-menu-vertical-demo">
                                    <el-submenu index="1">
                                        <i slot="title">
                                            <!-- <i class="el-icon-goods"></i> -->
                                        <span>基础组件</span>
                                        </i>
                                        <el-menu-item-group>
                                            <el-menu-item v-for="(item, index) in redata1" :key="item.key" @click="leftclick(index,1,item.key)"
                                            v-if="(((item.key==='graphicgroup' && patSetting.plugin.cgp.open) || !(['graphicgroup'].includes(item.key))) && ((item.key==='marketgroup' && patSetting.plugin.groups.open) || !(['marketgroup'].includes(item.key))) 
                                            &&((item.key==='marketlottery' && patSetting.plugin.luck.open) || !(['marketlottery'].includes(item.key))) &&(((item.key==='marketspike' && item.key==='newmarketspike') && patSetting.plugin.spike.open) || !(['marketspike','newmarketspike'].includes(item.key))) 
                                            &&((item.key==='marketbargain' && patSetting.plugin.bargain.open) || !(['marketbargain'].includes(item.key)))
                                            &&((item.key==='marketenvelope' && patSetting.plugin.redenvelopes.open) || !(['marketenvelope'].includes(item.key))))" :index="`1-${index}`">
                                              <div class="flex-col flex-justify-c flex-align-c">
                                                    <svg-icon :icon-class="item.icon" />
                                                    <p class="renohome-left-text">{{item.name}}</p>
                                                </div>
                                                <!-- <div class="flex-col flex-justify-c flex-align-c" v-if='item.name!=="团购" '>
                                                    <svg-icon :icon-class="item.icon" />
                                                    <p class="renohome-left-text">{{item.name}}</p>
                                                </div>
                                                <div class="flex-col flex-justify-c flex-align-c" v-if='item.name=="团购" && patSetting.plugin.cgp.open'>
                                                    <i class="el-icon-goods" style='font-size:24px;'></i>
                                                    <p class="renohome-left-text">{{item.name}}</p>
                                                </div> -->
                                            </el-menu-item>
                                        </el-menu-item-group>
                                    </el-submenu>
                                    <el-submenu index="2">
                                        <i slot="title">
                                            <!-- <i class="el-icon-picture-outline"></i> -->
                                        <span>辅助组件</span>
                                        </i>
                                        <el-menu-item-group>
                                            <el-menu-item v-for="(item, index) in redata2" :key="item.key" @click="leftclick(index,2,item.key)" :index="`1-${index}`">
                                                <div class="flex-col flex-justify-c flex-align-c">
                                                    <!-- <icon-font class="renohome-icon" :iconName="item.icon"></icon-font> -->
                                                    <svg-icon :icon-class="item.icon" />
                                                    <p class="renohome-left-text">{{item.name}}</p>
                                                    <!-- <p class="renohome-left-num">{{item.nownum}}{{!!item.allnum?'/'+item.allnum:''}}</p> -->
                                                </div>
                                            </el-menu-item>
                                        </el-menu-item-group>
                                    </el-submenu>
                                    <el-submenu index="3">
                                        <i slot="title">
                                            <!-- <i class="el-icon-document"></i> -->
                                        <span>商品组件</span>
                                        </i>
                                        <el-menu-item-group>
                                            <el-menu-item v-for="(item, index) in redata3" :key="item.key" v-if="((item.key === 'marketlottery' && patSetting.plugin.luck.open) || 
                                            (item.key === 'marketgroup' && patSetting.plugin.groups.open) || 
                                            (item.key === 'marketspike' && patSetting.plugin.spike.open)||
                                            (item.key === 'newmarketspike' && patSetting.plugin.spike.open)||
                                            (item.key === 'marketbargain' && patSetting.plugin.bargain.open) || 
                                            (item.key === 'marketenvelope' && patSetting.plugin.redenvelopes.open)||
                                            !(['marketlottery','marketgroup','marketspike','newmarketspike','marketbargain','marketenvelope'].includes(item.key)))"  @click="leftclick(index,3,item.key)" :index="`1-${index}`">
                                                <div class="flex-col flex-justify-c flex-align-c">
                                                    <!-- <icon-font class="renohome-icon" :iconName="item.icon"></icon-font> -->
                                                    <svg-icon :icon-class="item.icon" />
                                                    <p class="renohome-left-text">{{item.name}}</p>
                                                    <!-- <p class="renohome-left-num">{{item.nownum}}{{!!item.allnum?'/'+item.allnum:''}}</p> -->
                                                </div>
                                            </el-menu-item>
                                        </el-menu-item-group>
                                    </el-submenu>
                                </el-menu>
                            </el-col>
                        </el-row>
                        <div class="flex-row flex-justify-c">
                            <section ref="renohome" class="renohome-content" v-loading="loading">
                                <div class="renohome-phone">
                                    <div class="renohome-phone-inner">
                                        <graphicpagetop-show ref="graphicpagetop" :custormItemData="pagetopData" :custormIndex="-2" :custormEvt="custormEvt"></graphicpagetop-show>
                                        <vuedraggable class="wrapper" v-model="custormList" draggable=".item">
                                            <!-- :move="draggableMove" -->
                                            <transition-group>
                                                <!-- <div v-for="showitem in custormList" :key="showitem.id" class="item">
                                              <p>{{showindex}}</p>
                                            </div> -->
                                                <!-- v-dragging="{ item: showitem, list: showitem.key!='graphicfindfix'?custormList:[], group: 'custormList'}" :key="showitem.id" -->
                                                <div ref="showitem" :id="showitem.id" :class="{'item': !noFiltersLits.includes(showitem.key)}" v-for="(showitem, showindex) in custormList" :key="showitem.id" style="background:#fff">
                                                   <!-- {{showitem}} -->
                                                    <component :id="showitem.id" :is="`${showitem.key}Show`" :custormItemData="showitem" :custormIndex="showindex" :custormCurrent="custormCurrent" :custormEvt="custormEvt"/>

                                                </div>
                                            </transition-group>
                                        </vuedraggable>
                                    </div>
                                </div>
                                <otheradvert-show ref="otheradvert_edit" :custormItemData="otheradvertData" :custormEditEvt="custormEditEvt"></otheradvert-show>
                            </section>
                            <div class="renohome-phone-btn flex-col">
                                <el-tooltip class="item" effect="dark" content="隐藏" placement="right">
                                    <el-button size="mini" @click="custormChange(custormCurrent,'hide')"><i v-bind:style="{'color':`${(custormCurrent == -1 || noFiltersLits.includes(custormCurrent))?'#999':'#fff'}`}" class="icon el-icon-view"></i></el-button>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="上移组件" placement="right">
                                    <el-button size="mini" @click="custormChange(custormCurrent,'up')"><i v-bind:style="{'color':`${(custormCurrent == -1 || noFiltersLits.includes(custormCurrent) || custormCurrent == 0 || (custormList[custormCurrent]&&noFiltersLits.includes(custormList[custormCurrent]['key'])))?'#999':'#fff'}`}" class="icon el-icon-arrow-up"></i></el-button>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="下移组件" placement="right">
                                    <el-button size="mini" @click="custormChange(custormCurrent,'down')"><i v-bind:style="{'color':`${(custormCurrent == -1 || noFiltersLits.includes(custormCurrent) || (custormCurrent+1 == custormList.length)||(custormList[custormCurrent]&&noFiltersLits.includes(custormList[custormCurrent]['key'])))?'#999':'#fff'}`}" class="icon el-icon-arrow-down"></i></el-button>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="复制组件" placement="right">
                                    <el-button size="mini" @click="custormChange(custormCurrent,'copy')"><i v-bind:style="{'color':`${custormCurrent != -1&&iscustormDataCopy&&hasCustormCopy?'#fff':'#999'}`}" class="icon el-icon-document"></i></el-button>
                                </el-tooltip>
                                <!-- <el-tooltip class="item" effect="dark" content="保存修改" placement="right">
                                    <el-button size="mini" ><i v-bind:style="{'color':'#fff','font-size':'16px'}" class="icon el-icon-edit-outline"></i></el-button>
                                </el-tooltip> -->
                            </div>
                        </div>
                        <div class="renohome-right">
                            <div v-if="pagetopData.key == 'graphicpagetop' && custormCurrent == -2">
                                <graphicpagetop-edit ref="graphicpagetop_edit" :custormItemData="pagetopData" :custormIndex="-1" :custormCurrent="-2" :custormEditEvt="custormEditEvt"></graphicpagetop-edit>
                            </div>
                            <div v-for="(item, index) in custormList" :data-key="index" :key="index">
                               <!-- {{item}} -->
                                <component :ref="`${item.key}_edit`" :is="custormCurrent == index && item.key == custormList[custormCurrent]['key'] ? `${item.key}Edit`: ''" :custormItemData="item" :custormIndex="index" :custormCurrent="custormCurrent" :custormEditEvt="custormEditEvt"/>

                            </div>
                        </div>
                    </div>

                </div>
            </section>
        </div>
    </div>
</div>
</template>

<script>
import vuedraggable from 'vuedraggable'
import custormData from '@/utils/custormInitData'
import ChooseFiles from '@/components/ChooseFiles/index'
import ChooseGoods from '@/components/ChooseGoods/index'
import ChooseCategories from '@/components/ChooseCategories/index'
import ChooseLink from '@/components/ChooseLink/index'

import graphiccenterShow from '@/components/CustormStyle/graphiccenter_show'
import graphiccenterEdit from '@/components/CustormStyle/graphiccenter_edit'
import graphicpagetopShow from '@/components/CustormStyle/graphicpagetop_show'
import graphicpagetopEdit from '@/components/CustormStyle/graphicpagetop_edit'
import goodscolShow from '@/components/CustormStyle/goodscol_show'
import goodsdbShow from '@/components/CustormStyle/goodsdb_show'
import goodsotherShow from '@/components/CustormStyle/goodsother_show'
import goodscolEdit from '@/components/CustormStyle/goodscol_edit'
import goodsdbEdit from '@/components/CustormStyle/goodsdb_edit'
import goodsotherEdit from '@/components/CustormStyle/goodsother_edit'

import graphicnoticeShow from '@/components/CustormStyle/graphicnotice_show'
import graphicnoticeEdit from '@/components/CustormStyle/graphicnotice_edit'

import graphicfindShow from '@/components/CustormStyle/graphicfind_show'
import graphicfindEdit from '@/components/CustormStyle/graphicfind_edit'
import graphicswiperShow from '@/components/CustormStyle/graphicswiper_show'
import graphicswiperEdit from '@/components/CustormStyle/graphicswiper_edit'
import graphicimgsShow from '@/components/CustormStyle/graphicimgs_show'
import graphicimgsEdit from '@/components/CustormStyle/graphicimgs_edit'
// import graphicdbimgsShow from '@/components/CustormStyle/graphicdbimgs_show'
// import graphicdbimgsEdit from '@/components/CustormStyle/graphicdbimgs_edit'
// import graphicdisplayimgsShow from '@/components/CustormStyle/graphicdisplayimgs_show'
// import graphicdisplayimgsEdit from '@/components/CustormStyle/graphicdisplayimgs_edit'
import graphicnavlistShow from '@/components/CustormStyle/graphicnavlist_show'
import graphicnavlistEdit from '@/components/CustormStyle/graphicnavlist_edit'
import graphictitleShow from '@/components/CustormStyle/graphictitle_show'
import graphictitleEdit from '@/components/CustormStyle/graphictitle_edit'
import graphicnoneShow from '@/components/CustormStyle/graphicnone_show'
import graphicnoneEdit from '@/components/CustormStyle/graphicnone_edit'
import graphicsublineShow from '@/components/CustormStyle/graphicsubline_show'
import graphicsublineEdit from '@/components/CustormStyle/graphicsubline_edit'
import graphicueditorShow from '@/components/CustormStyle/graphicueditor_show'
import graphicueditorEdit from '@/components/CustormStyle/graphicueditor_edit'
import graphicbtnsShow from '@/components/CustormStyle/graphicbtns_show'
import graphicbtnsEdit from '@/components/CustormStyle/graphicbtns_edit'
import graphicvideoShow from '@/components/CustormStyle/graphicvideo_show'
import graphicvideoEdit from '@/components/CustormStyle/graphicvideo_edit'
import graphicfloatbtnShow from '@/components/CustormStyle/graphicfloatbtn_show'
import graphicfloatbtnEdit from '@/components/CustormStyle/graphicfloatbtn_edit'
import graphicaudioShow from '@/components/CustormStyle/graphicaudio_show'
import graphicaudioEdit from '@/components/CustormStyle/graphicaudio_edit'
// import graphicformShow from '@/components/CustormStyle/graphicform_show'
// import graphicformEdit from '@/components/CustormStyle/graphicform_edit'
import graphicmagicsquareShow from '@/components/CustormStyle/graphicmagicsquare_show'
import graphicmagicsquareEdit from '@/components/CustormStyle/graphicmagicsquare_edit'
import graphichotspotsShow from '@/components/CustormStyle/graphichotspots_show'
import graphichotspotsEdit from '@/components/CustormStyle/graphichotspots_edit'

import marketcouponShow from '@/components/CustormStyle/marketcoupon_show'
import marketcouponEdit from '@/components/CustormStyle/marketcoupon_edit'
import marketgroupShow from '@/components/CustormStyle/marketgroup_show'
import marketgroupEdit from '@/components/CustormStyle/marketgroup_edit'
import marketlotteryShow from '@/components/CustormStyle/marketlottery_show'
import marketlotteryEdit from '@/components/CustormStyle/marketlottery_edit'
import marketcountdownShow from '@/components/CustormStyle/marketcountdown_show'
import marketcountdownEdit from '@/components/CustormStyle/marketcountdown_edit'
import marketspikeShow from '@/components/CustormStyle/marketspike_show'
import marketspikeEdit from '@/components/CustormStyle/marketspike_edit'
import marketbargainShow from '@/components/CustormStyle/marketbargain_show'
import marketbargainEdit from '@/components/CustormStyle/marketbargain_edit'
import marketenvelopeShow from '@/components/CustormStyle/marketenvelope_show'
import marketenvelopeEdit from '@/components/CustormStyle/marketenvelope_edit'
import otheradvertShow from '@/components/CustormStyle/otheradvert_show'
import graphicgroupShow from '@/components/CustormStyle/graphicgroup_show'
import graphicgroupEdit from '@/components/CustormStyle/graphicgroup_edit'
import livelistShow from '@/components/CustormStyle/livelist_show'
import livelistEdit from '@/components/CustormStyle/livelist_edit'
import newmarketspikeShow from '@/components/CustormStyle/newmarketspike_show'
import newmarketspikeEdit from '@/components/CustormStyle/newmarketspike_edit'
import { getDiyPageInfo } from '@/api/platform'
import power from '@/mixins/power'
import {
  signid
} from '@/utils/index'
import custormBase from '@/views/application/mixins/custormBase'
console.log('dddddddddddddddhhhhhhhhhhhhhh', custormData)
export default {
  name: 'Mgroup',
  mixins: [power, custormBase],
  watch: {
    'setTop': {
      handler(newData, oldData) {
        const graphicpagetop = this.$refs.graphicpagetop
        if (graphicpagetop) {
          graphicpagetop.clickCurrent('current', -2)
        }
      },
      immediate: true,
      deep: true
    },
    'custormList': {
      handler(newData, oldData) {
        this.$store.commit('SET_DIYPAGE_INFO', this.$custormList)
      },
      immediate: true,
      deep: true
    },
    'pagetopData': {
      handler(newData, oldData) {
        console.log('pagetopData', newData)
        this.$store.commit('SET_DIYPAGE_INFO', this.$custormList)
      },
      immediate: true,
      deep: true
    },
    'otheradvertData': {
      handler(newData, oldData) {
        this.$store.commit('SET_DIYPAGE_INFO', this.$custormList)
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      editId: false,
      noFiltersLits: [-2, 'graphicfindfix', 'graphicfloatbtn'],
      openeds: ['1', '2', '3', '4'],
      frequency: 50,
      scrollscale: 2,
      custormInitData: custormData.data,
      iscustormDataCopy: false,
      hasCustormCopyMap: ['marketgroup', 'marketlottery', 'marketcoupon', 'marketspike', 'graphicfind', 'marketbargain', 'graphicfloatbtn'],
      otheradvertData: {
        id: 'Mhjp0iji1k2a4',
        key: 'otheradvert',
        name: '弹窗广告',
        params: {
          open: '2', // 1开启 2关闭
          thumb: {
            file_path: 'default_picture.png'
          }, // 广告图
          link: '', // 广告链接
          join_user: '1', // 参与用户 1显示 2隐藏
          overtime: '', // 结束时间
          status: '1', // 1仅首次 2每次
          pattern: '1', // 1默认 2自定义
          rate: '',
          type: '1', // 图片 商品 抽奖
          active: 'lottery', // 默认抽奖类型
          position: '1',
          close: '1' // 关闭按钮 1显示 2不显示
        },
        style: {
          'display': '1',
          'title': ''
        },
        data: []
      }, // 存放分离出的广告组件数据
      pagetopData: {
        id: 'Mntp0xz392xcf',
        key: 'graphicpagetop',
        name: '页面标题',
        params: {
          moshi: '1',
          isshow: '1',
          title: '首页',
          sharetitle: '',
          shareinfo: '',
          pattern: 1,
          classtype: 1,
          shownavigation:1,
          sharepath: [{
            file_path: 'default_picture.png'
          }]

        },
        style: {
          bgcolor: '#FFD940',
          texttype: '1',
          bgcolorF: '',
          bgcolorT: ''
        },
        data: [{
          link: '',
          thumb: {
            file_path: 'default_picture.png'
          }
        }]
        // rotationpatg:[{
        // link: '',
        // thumb: {
        //   file_path: 'default_picture.png'
        //     }
        // }]
      }, // 存放分离出的页面标题数据
      redata1: [
        {
          icon: 'gonggao',
          name: '公告',
          key: 'graphicnotice',
          nownum: 0
        },
        {
          icon: 'sousuokuang',
          name: '搜索框',
          key: 'graphicfind',
          nownum: 0,
          allnum: 1
        },
        {
          icon: 'fuwenben',
          name: '富文本',
          key: 'graphicueditor',
          nownum: 0
        },
        {
          icon: 'anniuzu',
          name: '导航按钮',
          key: 'graphicbtns',
          nownum: 0
        },
        {
          icon: 'liebiaodaohang',
          name: '列表导航',
          key: 'graphicnavlist',
          nownum: 0
        },
        {
          icon: 'lunbo',
          name: '图片轮播',
          key: 'graphicswiper',
          nownum: 0
        },
        {
          icon: 'danlietupian',
          name: '单列图片',
          key: 'graphicimgs',
          nownum: 0
        },
        {
          icon: 'mofang',
          name: '魔方',
          key: 'graphicmagicsquare',
          nownum: 0
        },
        {
          icon: 'hotspots',
          name: '热区',
          key: 'graphichotspots',
          nownum: 0
        },
        {
          icon: 'tuangou',
          name: '团购',
          key: 'graphicgroup',
          nownum: 0
        },
        {
          icon: 'zhibo',
          name: '直播',
          key: 'livelist',
          nownum: 0
        },
        {
          icon: 'gerenzhongxin',
          name: '个人中心',
          key: 'graphiccenter',
          nownum: 0
        },
        
      ],
      redata2: [

        // {
        //   icon: 'gudingsousuokuang',
        //   name: '固定搜索框',
        //   key: 'graphicfindfix',
        //   nownum: 0,
        //   allnum: 1
        // },

        // {
        //   icon: 'shuanglietupian',
        //   name: '双列图片',
        //   key: 'graphicdbimgs',
        //   nownum: 0
        // },
        // {
        //   icon: 'tupianzhanbo',
        //   name: '图片展播',
        //   key: 'graphicdisplayimgs',
        //   nownum: 0,
        //   allnum: 2
        // },
        {
          icon: 'fuzhuxian',
          name: '辅助线',
          key: 'graphicsubline',
          nownum: 0
        },
        {
          icon: 'fuzhukongbai',
          name: '辅助空白',
          key: 'graphicnone',
          nownum: 0
        },
        {
          icon: 'biaotilan',
          name: '标题栏',
          key: 'graphictitle',
          nownum: 0
        },
        {
          icon: 'yinpin',
          name: '音频播放',
          key: 'graphicaudio',
          nownum: 0,
          allnum: 1
        },
        {
          icon: 'shipin',
          name: '视频播放',
          key: 'graphicvideo',
          nownum: 0
        },
        {
          icon: 'danchuangguanggao',
          name: '弹窗广告',
          key: 'otheradvert'
        },
        // {
        //   icon: 'biaodan1',
        //   name: '表单',
        //   key: 'graphicform',
        //   nownum: 0,
        //   allnum: 1
        // },
        {
          icon: 'floatbtn',
          name: '浮动按钮',
          key: 'graphicfloatbtn',
          nownum: 0,
          allnum: 1
        }
      ],
      redata3: [
        {
          icon: 'danlieshangpin',
          name: '商品',
          key: 'goodscol',
          nownum: 0
        },
        // {
        //   icon: 'shuanglieshangpin',
        //   name: '双列商品',
        //   key: 'goodsdb',
        //   nownum: 0,
        //   allnum: 6
        // },
        // {
        //   icon: 'qitaleixing',
        //   name: '其他类型',
        //   key: 'goodsother',
        //   nownum: 0,
        //   allnum: 6
        // },
        // {
        //   icon: 'xuanxiangka',
        //   name: '选项卡',
        //   key: 'goodstab',
        //   nownum: 0,
        //   allnum: 1
        // },
        // {
        //   icon: 'cainixihuan',
        //   name: '猜你喜欢',
        //   key: 'goodslike',
        //   nownum: 0,
        //   allnum: 1
        // },
        // {
        //   icon: 'shangpinpaihang',
        //   name: '商品排行',
        //   key: 'goodssort',
        //   nownum: 0,
        //   allnum: 1
        // }
        {
          icon: 'youhuiquan1',
          name: '优惠券',
          key: 'marketcoupon',
          nownum: 0,
          allnum: 1
        },
        {
          icon: 'pintuan',
          name: '拼团',
          key: 'marketgroup',
          nownum: 0
        },
        {
          icon: 'lottery',
          name: '抽奖',
          key: 'marketlottery',
          nownum: 0
        },
        {
          icon: 'miaosha',
          name: '秒杀',
          key: 'marketspike',
          nownum: 0
        },
        {
          icon: 'bargain',
          name: '砍价',
          key: 'marketbargain',
          nownum: 0
        },
        {
          icon: 'bargain',
          name: '分享红包',
          key: 'marketenvelope',
          nownum: 0
        },
        {
          icon: 'miaosha',
          name: '新版秒杀',
          key: 'newmarketspike',
          nownum: 0
        }
        // {
        //   icon: 'daojishi',
        //   name: '倒计时',
        //   key: 'marketcountdown',
        //   nownum: 0,
        //   allnum: 1
        // }
      ],
      redata4: []
    }
  },
  directives: {
    // domscroll
  },
  computed: {
    setTop() {
      return !this.$store.getters.setDiyTop
    },
    hasCustormCopy() {
      if (this.custormCurrent >= 0) {
        const currentKey = this.custormList[this.custormCurrent]['key']
        return !this.hasCustormCopyMap.includes(currentKey)
      }
    },
    $custormList() {
      return this.$edit ? [{ diy_page_id: this.$route.query.diy_page_id, type: this.$route.query.type,name: this.pagetopData.name,data: [this.pagetopData, ...this.custormList, this.otheradvertData] }] : [{ name: this.pagetopData.name, data: [this.pagetopData, ...this.custormList, this.otheradvertData] }]
    },
    $edit() {
      return !!this.$route.query.diy_page_id
    }
  },
  components: {
    graphicgroupEdit,
    graphicgroupShow,
    vuedraggable,
    ChooseFiles,
    ChooseGoods,
    ChooseCategories,
    ChooseLink,
    graphicpagetopShow,
    graphiccenterEdit,
    graphiccenterShow,
    graphicpagetopEdit,
    goodscolShow,
    goodscolEdit,
    goodsdbShow,
    goodsotherShow,
    // goodstabShow,
    // goodslikeShow,
    // goodslikeEdit,
    // goodssortShow,
    // goodssortEdit,

    graphicnoticeShow,
    graphicnoticeEdit,

    // graphicfindfixShow,
    // graphicfindfixEdit,
    graphicfindShow,
    graphicfindEdit,
    graphicswiperShow,
    graphicswiperEdit,
    graphicimgsShow,
    graphicimgsEdit,
    // graphicdbimgsShow,
    // graphicdbimgsEdit,
    // graphicdisplayimgsShow,
    // graphicdisplayimgsEdit,
    graphicnavlistShow,
    graphicnavlistEdit,
    graphictitleShow,
    graphictitleEdit,
    graphicnoneShow,
    graphicnoneEdit,
    graphicsublineShow,
    graphicsublineEdit,
    graphicueditorShow,
    graphicueditorEdit,
    graphicbtnsShow,
    graphicbtnsEdit,
    graphicvideoShow,
    graphicvideoEdit,
    graphicfloatbtnShow,
    graphicfloatbtnEdit,
    graphicaudioShow,
    graphicaudioEdit,
    // graphicformShow,
    // graphicformEdit,
    graphicmagicsquareShow,
    graphicmagicsquareEdit,
    graphichotspotsShow,
    graphichotspotsEdit,
    marketcouponShow,
    marketcouponEdit,
    marketgroupShow,
    marketgroupEdit,
    marketlotteryShow,
    marketlotteryEdit,
    marketcountdownShow,
    marketcountdownEdit,
    marketspikeShow,
    marketspikeEdit,
    marketbargainShow,
    marketbargainEdit,
    marketenvelopeShow,
    marketenvelopeEdit,
    otheradvertShow,
    goodsdbEdit,
    goodsotherEdit,
    // goodstabEdit,
    livelistShow,
    livelistEdit,
    newmarketspikeShow,
    newmarketspikeEdit
  },
  destroyed() {
    this.$store.commit('SET_DIYPAGE_ID', null)
  },
  beforeDestroy() {
    this.$refs.renohome.removeEventListener('scroll', this.handleScroll, false)
    clearInterval(this.$refs.renohome.timer)
  },
  created() {
    this.$nextTick(() => {
      const diy_page_id = this.$route.query.diy_page_id
      if (this.$edit) {
        this.$store.commit('SET_DIYPAGE_ID', diy_page_id)
        getDiyPageInfo({ diy_page_id: diy_page_id }).then(res => {
          const { data: { code, data: { name, data: custormList } } } = res
          console.log('res', res, name)
          if (code === 1 && custormList.length > 2) {
            if (!custormList[0]['params']['sharepath']) {
              custormList[0]['params']['sharepath'] = [{
                file_path: 'default_picture.png'
              }]
            }
            if (!custormList[0]['params']['shareinfo']) {
              custormList[0]['params']['shareinfo'] = ''
            }
            if (!custormList[0]['params']['pattern']) {
              custormList[0]['params']['pattern'] = '1'
            }
            if (!custormList[0]['params']['classtype']) {
              custormList[0]['params']['classtype'] = '2'
            }
            if (!custormList[0]['params']['shownavigation']) {
              custormList[0]['params']['shownavigation'] = '1'
            }
            if (!custormList[0]['params']['data']) {
              custormList[0]['params']['data'] = [{
                link: '',
                thumb: {
                  file_path: 'default_picture.png'
                }
              }]
            }
            if (!custormList[0]['data']) {
              custormList[0]['data'] = [{
                link: '',
                thumb: {
                  file_path: 'default_picture.png'
                }
              }]
            }
            console.log('custormItemData.data', custormList)

            custormList.map(item => {
              console.log('9999999999999999', item)
              if (item.key == 'goodscol') {
                if (!item['params']['goodstitle']) {
                  item['params']['goodstitle'] = '2'
                }
                if (!item['params']['sharetitle']) {
                  item['params']['sharetitle'] = ''
                }
                if (!item['params']['titlestyle']) {
                  item['params']['titlestyle'] = '1'
                }
                if (!item['params']['maintext']) {
                  item['params']['maintext'] = '这是主标题'
                }
                if (!item['params']['subtext']) {
                  item['params']['subtext'] = '这是副标题'
                }
                if (!item['params']['advertisement']) {
                  item['params']['advertisement'] = '2'
                }
                if (!item['params']['thumb']) {
                  item['params']['thumb'] = {
                    file_path: 'default_picture.png'
                  }
                }
                if (!item['params']['adverlink']) {
                  item['params']['adverlink'] = ''
                }
                if (!item['params']['showmore']) {
                  item['params']['showmore'] = '2'
                }
                if (!item['params']['link']) {
                  item['params']['link'] = ''
                }
                if (!item['params']['newest']) {
                  item['params']['newest'] = '2'
                }
                if (!item['style']) {
                  item['style'] = {
                    morecolor: '#999999',
                    maincolor: '#333333',
                    subcolor: '#999999',
                    selectcolor: '#333333',
                    unselectcolor: '#333333',
                    backgcolor: '#FFD940',
                    unbackgcolor: '#ffffff'
                  }
                }
                console.log('morecolor', item)
                if (!item['style'] || !item['style']['morecolor']) {
                  item['style']['morecolor'] = '#999999'
                }
                if (!item['style']['maincolor']) {
                  item['style']['maincolor'] = '#333333'
                }
                if (!item['style']['subcolor']) {
                  item['style']['subcolor'] = '#999999'
                }
                if (!item['style']['selectcolor']) {
                  item['style']['selectcolor'] = '#333333'
                }
                if (!item['style']['unselectcolor']) {
                  item['style']['unselectcolor'] = '#333333'
                }
                if (!item['style']['backgcolor']) {
                  item['style']['backgcolor'] = '#FFD940'
                }
                if (!item['style']['unbackgcolor']) {
                  item['style']['unbackgcolor'] = '#ffffff'
                }

              }
              if(item.key == 'marketcoupon'){
                 if (!item['params']['pattern']) {
                      item['params']['pattern'] = 1
                    }
              }
              if(item.key=='graphiccenter'){
                  if (!item['params']) {
                      item['params']={
                          isshow: '1',
                        }
                    }
              }
             
            })
            const graphicpagetopIndex = custormList.findIndex(advertItem => {
              return advertItem.key === 'graphicpagetop'
            })
            if (custormList[graphicpagetopIndex]['data'] === '') {
              custormList[graphicpagetopIndex]['data'] = []
            }
            console.log('graphicpagetopIndex', graphicpagetopIndex)
            this.pagetopData = custormList[0]
            const otheradvertIndex = custormList.findIndex(advertItem => {
              return advertItem.key === 'otheradvert'
            })

            if (otheradvertIndex !== -1) {
              this.otheradvertData = custormList[otheradvertIndex]
              custormList.splice(otheradvertIndex, 1)
            }

            custormList.splice(0, 1)
            this.custormList = custormList
          }
        })
      }
      this.$refs.renohome.addEventListener('scroll', this.handleScroll, false)
    })
  },
  mounted() {

  },
  methods: {
    handleScroll() {
      this.$refs.renohome.timer && clearInterval(this.$refs.renohome.timer)
    },
    draggableMove(evt) {
      // var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
      //   document.body.scrollTop
      // var scroll = scrollTop - this.scrollTop
      // this.scrollTop = scrollTop
      // const maxTop = this.$refs.renohome.scrollHeight - this.$refs.renohome.clientHeight
      // console.log(evt.dragged.offsetTop, maxTop, 'draggableMove')
      // this.$refs.renohome.scrollTop = 200
    },
    custormListCopy(custormList) {
      const custormListCopyData = JSON.parse(JSON.stringify(custormList))
      // console.log(custormListCopyData)
      custormListCopyData.map((item, index) => {
        if (item.key === 'graphicfindfix') {
          custormListCopyData.splice(index, 1)
        }
      })
      return custormListCopyData
    },
    custormChange(current, type) {
      if (!this.noFiltersLits.includes(this.custormCurrent)) {
        if ((this.custormCurrent !== -1 || (type === 'save' && this.custormList.length !== 0))) {
          const listLen = (this.custormCurrent !== -1) ? this.custormList.length : 0
          const key = (this.custormCurrent !== -1) ? this.custormList[this.custormCurrent]['key'] : ''

          if (type === 'hide') {
            const isshow = (current !== -1) ? this.custormList[this.custormCurrent]['params']['isshow'] : '2'
            if (current !== -1) {
              this.custormList[this.custormCurrent]['params']['isshow'] = isshow === '1' ? '2' : '1'
            }
          } else if (type === 'up') {
            if ((current !== -1) && current !== 0 && key !== 'graphicfindfix') {
              // console.log(this.custormList, 'up$')
              this.$nextTick(() => {
                [this.custormList[this.custormCurrent], this.custormList[this.custormCurrent - 1]] = [this.custormList[this.custormCurrent - 1], this.custormList[this.custormCurrent]]
                const newlist = this.custormList
                this.custormCurrent = current - 1
                const $custormList = this.$edit ? [{ diy_page_id: this.$route.query.diy_page_id, type: this.$route.query.type, name: this.pagetopData.name, data: [this.pagetopData, ...newlist, this.otheradvertData] }] : [{ name: this.pagetopData.name, data: [this.pagetopData, ...newlist, this.otheradvertData] }]
                // console.log(newlist, 'this.$custormList=>')
                this.$store.commit('SET_DIYPAGE_INFO', $custormList)
                // console.log(this.custormCurrent, 'up')
                // console.log(this.custormList, 'up&')
                // console.log(this.$custormList, 'SET_DIYPAGE_INFO')
                this.checkCopy()
                this.watchCurrentScroll()
              })
            }
          } else if (type === 'down') {
            if ((current !== -1) && listLen !== current + 1 && key !== 'graphicfindfix') {
              // console.log(this.custormList, 'up$')
              this.$nextTick(() => {
                [this.custormList[this.custormCurrent], this.custormList[this.custormCurrent + 1]] = [this.custormList[this.custormCurrent + 1], this.custormList[this.custormCurrent]]
                const newlist = this.custormList
                this.custormCurrent = current + 1
                const $custormList = this.$edit ? [{ diy_page_id: this.$route.query.diy_page_id, type: this.$route.query.type, name: this.pagetopData.name, data: [this.pagetopData, ...newlist, this.otheradvertData] }] : [{ name: this.pagetopData.name, data: [this.pagetopData, ...newlist, this.otheradvertData] }]
                // console.log(this.$custormList, 'this.$custormList=>')
                this.$store.commit('SET_DIYPAGE_INFO', $custormList)
                // console.log(this.custormCurrent, 'down')
                // console.log(this.custormList, 'up&')
                this.checkCopy()
                this.watchCurrentScroll()
              })
            }
          } else if (type === 'copy') {
            if (current !== -1) {
              const redataItem = this.checkCopy()
              // console.log(redataItem, 'checkCopy=>redataItem')
              if (this.iscustormDataCopy && this.hasCustormCopy) {
                redataItem.nownum += 1
                const _copyData = JSON.parse(JSON.stringify(this.custormList[this.custormCurrent]))
                _copyData.id = signid('MC')
                // this.$nextTick(() => {
                // console.log(this.custormCurrent);
                this.custormList.splice(this.custormCurrent > 1 ? this.custormCurrent : 0, 0, _copyData)
                this.custormCurrent = this.custormCurrent + 1
                this.watchCurrentScroll()
                // })
              }
            }
          } else if (type === 'save') {
            // const saveCustormData = {
            //   type: '2',
            //   data: JSON.stringify(this.custormList),
            //   menu: JSON.stringify([this.redata1, this.redata2, this.redata3, this.redata4]),
            //   advertdata: JSON.stringify([this.otheradvertData])
            // }

            // if (!this.editId) {
            //   saveCustormData.style = 'style'
            // } else {
            //   saveCustormData.id = this.editId
            // }

            // this.$axios.http({
            //   url: [
            //     `http://we7.weliam.cn/web/api/index.php?m=stylelication&do=indexStyadEdit&token=${
            //     this._$utoken
            //     }`
            //   ],
            //   method: "post",
            //   data: this.$qs.stringify(saveCustormData)
            // },
            //   (...arg) => {
            //     let [{
            //       data: message = {}
            //     }] = arg;
            //     this.$message({
            //       type: `${message.errno == 0 ? "success" : 'error'}`,
            //       message: message.message
            //     });
            //     console.log(arg);
            //   },
            //   this
            // );
          }
        }
      }
    },
    watchCurrentScroll() {
      this.$nextTick(() => {
        if (this.custormCurrent !== -1) {
          const keyid = this.custormList[this.custormCurrent].id
          const type = this.custormList[this.custormCurrent].key
          const maxTop = this.$refs.renohome.scrollHeight - this.$refs.renohome.clientHeight
          console.log(this.$refs, 'this.$refs.showitem.')
          if (!!keyid && this.$refs.showitem.length > 0) {
            // const renohomeTop = this.$refs.renohome.scrollTop
            let currentTop = 0
            // const arrow = (currentTop - renohomeTop) >= 0 ? 1 : -1
            if (type === 'graphicfloatbtn') {
              currentTop = maxTop
            } else {
              this.$refs.showitem.some((item) => {
                console.log(item, '_this3.$refs.showitem.some')
                const isshowitem = item.id === keyid
                // const isshowitem = item.$el.id === keyid //如果没用动态组件，就用$el获取
                if (isshowitem) {
                  currentTop = item.offsetTop
                  // item.$el.offsetTop 如果没用动态组件，就用$el获取
                }
                return isshowitem
              })
            }
            // console.log(currentTop,'currentTop');
            // console.log(this.custormCurrent,this.$refs.showitem);
            // console.log(custormCurrent-1,custormCurrent||this.custormCurrent,this.$refs.showitem[this.custormCurrent].$el,this.$refs.showitem[custormCurrent||this.custormCurrent].$el.offsetTop,this.$refs.showitem)
            clearInterval(this.$refs.renohome.timer)
            this.$refs.renohome.timer = setInterval(() => {
              const iCur = parseInt(parseFloat(this.$refs.renohome.scrollTop))
              let iSpeed = (currentTop - iCur) / this.scrollscale
              iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)
              this.$refs.renohome.scrollTop = iCur + iSpeed;
              (this.$refs.renohome.scrollTop === maxTop || !(iCur !== currentTop)) && clearInterval(this.$refs.renohome.timer)
            }, this.frequency)
          }
        }
      })
      //  console.log(this.$refs.showitem);
    },
    leftclick(index, e, key) {
      const allnum = this[`redata${e}`][index].allnum
      console.log(this.custormList, 'this.custormList----------------------')
      const num = this.custormList.filter(custormItem => {
        const { key: keyNow } = custormItem
        return keyNow === key
      })
      // 组件没有个数限制
      if (allnum > num.length || !allnum) {
        if (key === 'otheradvert') {
          // 显示出广告弹窗
          this.$refs.otheradvert_edit.toggle()
        } else {
          if (this.custormCurrent === -2) {
            this.custormCurrent = -1
          }
          // debugger
          const spliceIndex = key === 'graphicfindfix' ? 0 : this.custormCurrent + 1
          // this[`redata${e}`][index].nownum = num + 1
          this.custormList.splice(spliceIndex, 0, Object.assign({}, this.filterCustorm(key)))
          this.$nextTick(() => {
            this.custormCurrent = spliceIndex
            this.checkCopy()
            this.watchCurrentScroll()
            // console.log(this.custormCurrent);
          })
        }
      //  if(key=='graphicaudio' && ){

      //  }
      } else {
        this.$message({
          type: 'error',
          message: `此类型组件最多添加${allnum}个~!`
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$renohome-top: 50px;

.secation {
  background: #ffffff;
  padding: 0.2rem;
  border: 1px dashed orange;
  margin: 20px 0;
}

.project-type {
  width: 245px;
}

.page-body {
  border: 0;
}

.welcome-container .account-stat {
  margin-bottom: 20px;
}

.section-page.renovationhome-page {
  /deep/ .el-radio+.el-radio{
    margin-left: 20px;
  }
  /deep/ .renohome-phone-btn .el-button {
    font-size: 16px;
    background: #73767d !important;
    padding: 11px 7px;
    border: none;
    color: #fff;
  }

  /deep/ .renohome-content {
    left: 305px !important;
  }

  /deep/ .renohome-content .renohome-phone .drag.active:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed #409eff;
    cursor: move;
    z-index: 10;
  }

  /deep/ .renohome-content .renohome-phone .drag:hover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed #409eff;
    cursor: move;
    z-index: 10;
  }

  /deep/ .renohome-content .renohome-phone .noshow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    background-color: rgba(0, 0, 0, 0.2);
    background-size: 80px 25px;
    background-position: 50%;
    background-repeat: no-repeat;
    z-index: 3;
  }
  /deep/ .custorm-help{
    margin-top:12px;
    color:#999999;
  }
  /deep/ .custorm--modelbox {
    position: relative;
  }

  /deep/ .custorm--modelbox .btn-edit-del {
    display: none;
    height: 16px;
    width: 16px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    background: #409eff;
    border-radius: 0 0 0 100%;
  }

  /deep/ .renohome-content .renohome-phone .drag:hover .btn-edit-del,
  /deep/ .renohome-content .renohome-phone .drag.active .btn-edit-del {
    display: block;
  }

  /deep/ .btn-edit-del .icon-close {
    font-size: 16px;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    text-align: right;
    line-height: 1;
  }

  /deep/ .btn-edit-del .icon-close::after {
    content: "×";
  }

  /deep/ .es-goods-group:after {
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    content: "";
    clear: both;
  }

  /deep/ .block {
    display: block !important;
  }

  /deep/ .el-submenu__title {
    font-style: normal;
  }

  & .welcome-container .panel-body {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 20px;
    padding-left: 116px;

    & .table-footer {
      background: #ffffff;
    }
  }

  & /deep/ .el-menu-item.is-active {
    color: #303133;
  }

  & /deep/ .el-form-item__label {
    white-space: nowrap;
  }

  & .renohome-icon {
    height: 20px;
    width: 20px;
  }

  & .el-menu-item:hover {
    background-color: transparent;
  }

  & .el-menu-item:hover::after {
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid #409eff;
    position: absolute;
    top: 0;
    left: 0;
  }

  & .el-menu-item:hover p {
    background-color: transparent;
  }

  & .el-menu-item:focus {
    background-color: transparent;
    color: #303133;
  }

  & .renohome-left-text {
    height: 21px;
    line-height: 21px;
    font-size: 14px;
    text-align: center;
    margin-top: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & .renohome-left-num {
    line-height: 15px;
    color: rgb(153, 153, 153);
    font-size: 12px;
  }

  & /deep/ .el-menu-item-group__title {
    display: none;
  }

  /deep/ .el-submenu__title {
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    font-weight: 600;
    padding: 0 15px;
    background-color: #f3f3f3;

    i {
      color: #333;
      margin-right: 0;
    }

    i > span {
      display: inline-block;
      font-style: normal;
    }
  }

  /deep/ .el-submenu.is-opened:nth-of-type(1) .el-submenu__title {
    border-top: none;
  }

  & /deep/ .el-menu-vertical-demo {
    // border: 1px solid #e6e6e6;
  }

  & .renohome-right {
    width: 360px;
    overflow-y: scroll;
    position: fixed;
    top: $renohome-top;
    bottom: 0;
    right: 0;
    background: #fff;
    border-radius: 4px;
    padding: 0 10px;
    z-index: 2;
  }

  & .renohome-left {
    width: 305px;
    overflow-y: scroll;
    position: fixed;
    top: $renohome-top;
    bottom: 0;
    left: 211px;
    background: #fff;

    /deep/ .el-menu-item-group > ul {
      flex-wrap: wrap;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;

      li {
        width: 33.33%;
        height: auto;
        line-height: auto;
        min-width: auto;
        padding: 15px 0 !important;
        &:not(:nth-child(3n+0)) {
          border-right: 1px solid #f3f3f3;
        }
        border-bottom: 1px solid #f3f3f3;
        position: relative;
      }

      .svg-icon {
        width: 23px;
        height: 26px;
        padding-top: 3px;
        opacity: 0.7;
      }
    }
  }

  & /deep/ .renohome-phone {
    width: 375px;
    background: #fafafa;
    margin: 50px auto 0;
    position: relative;
    box-sizing: border-box;
  }

  & /deep/ .renohome-phone-inner {
    border: 1px solid #ddd;
    background: #fff;
    min-height: 760px;
  }

  & /deep/ .renohome-content {
    background: #f2f4f7;
    position: fixed;
    overflow-y: scroll;
    left: 479.5px;
    right: 360px;
    top: $renohome-top;
    bottom: 0;
    padding-bottom: 50px;
  }

  & /deep/ .renohome-phone-btn {
    position: fixed;
    width: 40px;
    height: auto;
    background: #535167;
    left: 49%;
    top: 40%;
    margin-left: 210px;
    border-radius: 20px;
    text-align: center;
    z-index: 2;
    overflow: hidden;
  }

  & /deep/ .renohome-phone-btn .el-button + .el-button {
    margin-left: 0;
  }

  & /deep/ .renohome-phone-btn .el-button {
    background: #535167 !important;
    padding: 11px 7px;
    border: none;
    color: #fff;
    position: relative;
  }

  & /deep/ .renohome-phone-btn .el-button::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 0;
    border-top: 1px solid #626077;
    bottom: 0;
    left: 10px;
  }

  & /deep/ ::-webkit-scrollbar {
    width: 4px;
    background-color: #f5f5f5;
    height: 6px;
  }

  & /deep/ ::-webkit-scrollbar-thumb {
    background-color: #999;
  }

  & /deep/ ::-webkit-scrollbar-track {
    background-color: #f2f4f7;
  }

  & /deep/ .renohome-content::-webkit-scrollbar-track {
    background: #f2f4f7;
  }

  & /deep/ .renohome-right-nav {
    width: 100%;
    position: relative;
    padding: 10px 0;
  }

  & /deep/ .renohome-right-nav-title {
    color: #409eff;
    font-size: 15px;
    text-align: left;
    padding-left: 15px;
    position: relative;
    height: 28px;
    line-height: 28px;
  }

  & /deep/ .renohome-right-nav-title::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    bottom: 5px;
    width: 3px;
    background: #409eff;
    border-radius: 30%;
  }

  & /deep/ .renohome-right-nav-list {
    height: 28px;
    line-height: 28px;
    background-color: #f2f2f3;
    border-radius: 14px;
    width: 180px;
  }

  & /deep/ .renohome-right-nav-itembox {
    background: rgb(242, 242, 242);
  }

  & /deep/ .renohome-right-nav-item {
    font-size: 14px;
    cursor: pointer;
    width: 90px;
    border-radius: 14px;
    text-align: center;
    height: 28px;
    line-height: 28px;
  }

  & /deep/ .renohome-right-nav-item.active {
    color: #fff;
    background-color: #2589ff;
  }

  & /deep/ .renohome-phone {
    *,
    :after,
    :before {
      box-sizing: border-box;
    }

    .line-hide,
    .two-line-hide {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .two-line-hide {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .line-hide {
      white-space: nowrap;
    }
  }

  & /deep/ .custorm--modelbox {
    .choose-goods {
      width: 100%;
      margin-bottom: 15px;

      .choods-item {
        width: 50px;
        height: 50px;
        margin-right: 5px;
        margin-bottom: 5px;
      }
    }

    .edit-form-item {
      padding: 20px 23px;
      font-size: 12px;
      background: #f8f8fa;
      border-radius: 6px;
      margin-bottom: 10px;
    }

    .edit-form-item:last-child {
      border-bottom: 0;
    }

    .el-radio__label {
      font-size: 12px;
    }

    .el-checkbox__label {
      font-size: 12px;
    }

    .form-label {
      line-height: 1;
      color: #47565d;
      font-weight: bolder;
      margin-bottom: 10px;
      font-size: 14px;
    }

    .form-label.mb-20 {
      margin-bottom: 20px;
    }

    .edit-form-item .inner {
      margin-top: 12px;
      white-space: nowrap;
    }

    .stylebox {
      padding: 10px 20px;
      color: #999;
      white-space: nowrap;
    }

    .ivu-color-picker .ivu-input {
      width: 56px;
      cursor: pointer;
      border-radius: 2px;
    }

    .ivu-input + span {
      box-sizing: border-box;
      line-height: 26px;
      width: 56px;
      height: 26px;
      margin-left: 10px;
      background: #f1f1f1;
      border-color: #dfdfdf;
      cursor: pointer;
      border-radius: 2px;
      border: 1px solid #dfdfdf;
      text-align: center;
    }

    .button-shape {
      margin-right: 20px;
      cursor: pointer;
    }

    .button-shape .opacity-0 {
      width: 0;
      height: 0;
      position: absolute;
    }

    .opacity-0 {
      opacity: 0;
    }

    .button-shape .opacity-0 {
      width: 0;
      height: 0;
      position: absolute;
    }

    .button-shape div.active {
      border-color: #409eff;
    }

    .button-shape div {
      width: 32px;
      height: 32px;
      background: #dfdfdf;
      border: 1px solid #dfdfdf;
    }

    .button-shape .button-shape-arc {
      border-radius: 4px;
    }

    .button-shape .button-shape-circle {
      border-radius: 16px;
    }

    .goodscol-add {
      border: 1px solid #6b7685;
      line-height: 32px;
      height: 32px;
      border-radius: 4px;
      text-align: center;
      cursor: pointer;
    }

    .el-color-picker--mini .el-color-picker__trigger {
      width: 56px;
    }

    .showcolor {
      width: 70px;
      text-align: center;
      line-height: 26px;
      height: 26px;
      background: #f1f1f1;
      color: #666;
      border-radius: 2px;
      border: 1px solid #dfdfdf;
      display: inline-block;
      margin-left: 10px;
    }

    .es-form-item {
      padding: 20px 23px;
      font-size: 12px;
      background: #f8f8fa;
      border-radius: 6px;
      margin-bottom: 10px;
      .uploadSource {
        background: #fff;
        cursor: pointer;
      }

      .uploadSource {
        width: 50px;
        height: 50px;
        line-height: 50px;
        margin-right: 0;
        border: 1px dashed #ededed;
        text-align: center;
        color: #dad9d9;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;
      }
    }

    .es-form-item:last-child {
      border-bottom: 0;
    }

    .es-form-item .item-inner {
      margin-top: 8px;
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;

      .color-picker span.ivu-input {
        width: 56px;
        line-height: 26px;
        height: 26px;
        background: #f1f1f1;
        color: #666;
        border-radius: 2px;
        border: 1px solid #dfdfdf;
        padding: 0;
        margin-left: 10px;
        display: inline-block;
      }
    }

    .es-form-item .item-inner:first-of-type {
      margin-top: 0;
    }

    .es-form-item .button-img {
      width: 32px;
      height: 32px;
      margin-right: 20px;
      cursor: pointer;
      border-radius: 4px;
      box-sizing: border-box;
      line-height: 36px;
      text-align: center;
      border: 1px solid transparent;
    }

    .es-form-item .button-img.block {
      width: 100%;
      position: relative;
      min-height: 32px;
      height: auto;
      text-align: left;
    }

    .es-form-item .button-img.active {
      border-color: #fb6638 !important;
    }

    .es-form-item [type="checkbox"],
    [type="radio"] {
      box-sizing: border-box;
      padding: 0;
    }

    .es-form-item .opacity-0 {
      opacity: 0;
    }

    .es-form-item .button-img .opacity-0 {
      width: 0;
      height: 0;
      position: absolute;
    }

    .es-form-item .alignC {
      text-align: center;
    }

    .es-form-item .item {
      background: #f6f7f9;
      padding: 10px 20px 10px 10px;
      border: 1px solid #eee;
      color: #999;
      position: relative;
      margin-bottom: 20px;
    }

    .es-form-item .labeltext {
      width: 40px;
      text-align: right;
      padding-right: 8px;
      white-space: nowrap;
      color: #666;
    }

    .es-form-item .item-inner .readonly-div {
      position: relative;
      flex-grow: 1;
    }

    .es-form-item .ivu-input-wrapper {
      display: inline-block;
      width: 100%;
      position: relative;
      vertical-align: middle;
      line-height: normal;
    }

    .es-form-item .ivu-input {
      display: inline-block;
      width: 100%;
      height: 32px;
      line-height: 1.5;
      padding: 4px 12px;
      font-size: 12px;
      border: 1px solid #ededed;
      border-radius: 4px;
      color: #333;
      background-color: #fff;
      background-image: none;
      position: relative;
      cursor: text;
      -webkit-transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
        -webkit-box-shadow 0.2s ease-in-out;
      transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;
    }

    .es-form-item .item-inner .readonly-div .readonly input {
      background: #e8effc;
      border: 0;
      padding-left: 18px;
      cursor: pointer;
      box-sizing: border-box;
    }

    .es-form-item .item-inner .readonly-div .readonly-icon {
      position: absolute;
      top: 5px;
      left: 12px;
    }

    .es-form-item .item .delete-child {
      position: absolute;
      right: -9px;
      top: -9px;
      cursor: pointer;
      font-size: 18px;
    }

    .coupon-showslider {
      width: 56px;
      height: 26px;
      background: #f6f7f9;
      border-color: #f1f1f1;
      color: #666;
      border-radius: 2px;
      line-height: 26px;
      text-align: center;
      margin-left: 20px;
    }

    .ivu-alert {
      position: relative;
      padding: 8px 16px;
      border-radius: 6px;
      color: #666;
      font-size: 12px;
      line-height: 22px;
      margin-bottom: 20px;
      border: 1px solid #d8e8fc;
      background-color: #e5f0fe;
    }

    .my-link-input .el-input__inner {
      border: none;
      height: 32px;
      background: #e8effc;
      cursor: pointer;
      border-radius: 5px;
    }

    .choose-item-lits {
      padding-top: 10px;
      flex-wrap: wrap;

      .choose-item-child {
        margin: 0 9px 10px 0;
        border-radius: 4px;
        border: 1px solid #ededed;
        width: 50px;
        height: 50px;
        line-height: 50px;
        position: relative;
        cursor: pointer;

        img.small {
          width: 48px;
          max-height: 100%;
          position: absolute;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
        }

        .delete {
          position: absolute;
          top: -6px;
          right: -6px;
          display: none;
          cursor: pointer;
        }

        &:hover {
          .delete {
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>
